<template>
	<up-navbar bgColor="transparent" >
		<template #left>
			<block v-if="back">
				<back-prev v-if="hasPrev" />
				<back-home v-else />
			</block>
			<view class="u-flex u-flex-items-center" v-else>
				<image v-if="logo" :src="logo" mode="heightFix" style="width: auto;height: 20px;">
				</image>
				<view v-else class="f-s-18 l-s-2 f-w-b">{{ pageName }}</view>
				<slot name="top"></slot>
			</view>
		</template>
	</up-navbar>
	<u-sticky :zIndex="9">
		<view class="_top" :style="{
		padding: `${bottom + appendHeight}px 32rpx 28rpx`
	}">
			<slot name="sticky"></slot>
		</view>
	</u-sticky>
	<view class="_area">
		<slot name="area"></slot>
	</view>


</template>

<script setup>
	import {
		hasPreviousPage
	} from '@/utils/common.js';

	import backPrev from '@/components/common/back-prev.vue'
	import backHome from '@/components/common/back-home.vue'

	const props = defineProps({
		pageName: String,
		logo: String,
		back: {
			type: Boolean,
			default: false
		},
		appendHeight: {
			type: Number,
			default: 16
		}
	})
	const bottom = uni.getMenuButtonBoundingClientRect().bottom
	// 是否存在上一页
	const hasPrev = hasPreviousPage()
</script>

<style lang="scss" scoped>
	._top {
		background-image: url(https://edu-yjzk.oss-cn-hangzhou.aliyuncs.com/education/common/2024/05/27/png/top_bg_20240527170416A023.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// height: 480rpx;
	}

	._area {
		padding: 0 32rpx 32rpx;
		box-sizing: border-box;
	}
</style>